<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{{title}}</title>
    <meta name="description" content="{{description}}" />
    <meta name="keywords" content="{{keywords}}" />
     <link rel="stylesheet" href="/static/melog.css"> 

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
    <link rel="apple-touch-icon" sizes="180x180" href="/blonde/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/blonde/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/blonde/favicon/favicon-16x16.png">
    <link rel="manifest" href="/blonde/favicon/site.webmanifest">
    <link rel="mask-icon" href="/blonde/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/blonde/favicon/favicon.ico">
    <meta name="theme-color" content="#ffffff">
    <meta property="og:title" content="{{title}}">
    <link rel="stylesheet" href="/blonde/css/style.min.css">
    <link href="/blonde/css/blonde.min.css" rel="stylesheet" type="text/css" media=" all" onload="this.media=' all'">
    <meta property="og:site_name" content="{{title}}">
    <meta property="og:description" content="{{description}}">

    <link rel="stylesheet" href="/blonde/css/custom.css">

    {{block 'css'}}{{/block}}
</head>

<body class="font-sans">
    <i class="dark hidden"></i>
    <div class="min-h-screen flex flex-col bg-gray-100 dark:bg-warmgray-800"> 
            <div class="bg-gray-800">
                <div class="container max-w-screen-xl mr-auto ml-auto">
                    <nav class="flex items-center justify-between flex-wrap bg-gray-800 p-6">
                        <div class="flex items-center flex-no-shrink bg-gray-800 text-white mr-6">
                            <a href="/"><span
                                    class="font-semibold text-2xl tracking-tight">{{site.webname}}</span></a>
                        </div>
                        <div class="flex md:hidden">
                            <div class="py-2">
                                <button onclick="toggleDarkMode()" class="focus:outline-none mr-1"
                                    aria-label="Darkmode Toggle Button"><i id="icon"
                                        class="inline-flex align-middle leading-normal text-lg text-white icon-sun"></i></button>
                                <span class="text-white">|</span>
                            </div>
                            <button id="hamburgerbtn" class="flex items-center px-3 py-1 text-white hover:opacity-50"
                                aria-label="Hamburger Button">
                                <span class="icon-menu text-2xl"></span>
                            </button>
                        </div>
                        <div class="hidden w-full md:flex md:flex-row sm:items-center md:w-auto" id="mobileMenu">
                            <div class="text-sm lg:flex-grow">
                            </div>
                            <div class="navmenu">
                                {{each nav_list item}}
                                <a href="{{item.nav_url}}"
                                    class="no-underline duration-200 block mt-4 sm:inline-block sm:mt-0 text-white hover:opacity-50 mr-4">
                                    {{item.nav_name}}
                                </a>
                                {{/each}}
                            </div>
                            <div class="text-white invisible md:visible">
                                <span>|</span>
                                <button onclick="toggleDarkMode()" class="focus-visible:outline-none"
                                    aria-label="Darkmode Toggle Button"><i id="icon2"
                                        class="hover:opacity-50 duration-200 inline-flex align-middle leading-normal text-lg ml-2 icon-sun"></i></button>
                            </div>
                        </div>
                        
                    </nav>
                </div>
            </div>
            <style>.active{display:block}</style>
            <script>let hamburger=document.getElementById('hamburgerbtn'),mobileMenu=document.getElementById('mobileMenu');hamburger.addEventListener('click',function(){mobileMenu.classList.toggle('active')})</script>
            <div style="text-align: center;">
                {{block 'header'}}{{/block}}
            </div>
            {{block 'content'}}{{/block}}
          
            <footer   class="footer_footer bg-gray-800 text-white p-6">
                <div class="container max-w-screen-xl mr-auto ml-auto">
                    {{if foot_links}}<p class="foot-links">{{each foot_links item}}<a href="{{item.url}}" target="_blank">{{item.title}}</a>{{/each}}</p>{{/if}}
                    {{if site.beian}}<p class="beian">{{@site.beian}}</p>{{/if}}
                    <p>© 2024 <a href="https://blonde.pages.dev/" class="duration-200 hover:opacity-50">Blonde</a>
                </p>
                <p>Powered by <a href="https://gohugo.io/" class="duration-200 hover:opacity-50">Hugo</a>, Theme <a href="https://github.com/opera7133/Blonde" class="duration-200 hover:opacity-50">Blonde</a>.</p>
                </div>
                <script>var icon=document.getElementById("icon"),icon2=document.getElementById("icon2");document.documentElement.classList.contains("dark")||localStorage.theme==='dark'||!('theme'in localStorage)&&window.matchMedia('(prefers-color-scheme: dark)').matches?(icon.classList.remove("icon-moon"),icon.classList.add("icon-sun"),icon2.classList.remove("icon-moon"),icon2.classList.add("icon-sun"),document.documentElement.classList.add('dark')):document.documentElement.classList.remove('dark');function toggleDarkMode(){document.documentElement.classList.contains('dark')?(icon.classList.remove("icon-sun"),icon.classList.add("icon-moon"),icon2.classList.remove("icon-sun"),icon2.classList.add("icon-moon"),document.documentElement.classList.remove('dark'),localStorage.theme='light'):(icon.classList.remove("icon-moon"),icon.classList.add("icon-sun"),icon2.classList.remove("icon-moon"),icon2.classList.add("icon-sun"),document.documentElement.classList.add('dark'),localStorage.theme='dark')}</script>
             </footer>
                <!-- <footer class="bg-gray-800 text-white p-6">
                    <div class="container max-w-screen-xl mr-auto ml-auto">
                        {{if foot_links}}<p class="foot-links">{{each foot_links item}}<a href="{{item.url}}" target="_blank">{{item.title}}</a>{{/each}}</p>{{/if}}
                        {{if site.beian}}<p class="beian">{{@site.beian}}</p>{{/if}}
                        <p>© 2020 <a href="{{site.basehost}}/" target="_blank">{{site.webname}}</a></span><span>Powered by <a href="https://me.i-i.me/special/melog.html" target="_blank">Melog</a> · {{site.VERSION}} · {{new Date() - site.APP_TIME}}ms</p>
                    </div> 
                </footer> -->
          
    <div id="go-top"></div>
    <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="/static/melog.js?v=0.1"></script>
    {{block 'js'}}{{/block}}
    <style> 
        .dark  button,.dark input,.dark optgroup,.dark select,.dark textarea {
            background-color: rgba(0,0,0,.2) !important;
        }
        .comment-more  {
            background-color: #46bc99;
            color: #fff;
        }
        .dark 
        article.content blockquote {
            color: #666 !important;
            border-left: 4px solid rgba(0,0,0,.5) !important;
            background-color: rgba(0,0,0,.2) !important;
        } 
    </style>
    <div id="xf-MusicPlayer" data-fadeOutAutoplay  data-themeColor="xf-girlPink" data-random="true" data-memory="1" data-lyrics="1"
    data-localMusic="/mp3playlist.json"
    ></div>
    <script src="/xf-MusicPlayer/js/xf-MusicPlayer.min.js"></script>
</body>

</html>